<template>
  <div class="container-mine">
    <div class="header">
      <img src="../../assets/img/code_title.png" style="width: 216px;height: 33px;padding: 20px 0;">
      <div style="display: flex;align-items: center;">
        <img src="../../assets/img/avatar.png" alt="" />
        <div class="user-info">
          <div class="user-name">{{ name | handleName }}</div>
          <div class="user-idcard">{{ idcard | handleIDCard }}</div>
        </div>
      </div>
    </div>
    <div class="main-mine">
      <div class="menu-wrapper">
        <div class="menu-inner" @click="handleGo('/code/mine/card')">
          <div class="menu-left">
            <img
              class="menu-left_icon"
              src="../../assets/img/mine_menu_1.png"
              alt=""
            />
            <div class="menu-left_name">我的卡包</div>
          </div>
          <img class="menu-right" src="../../assets/img/right.png" alt="" />
        </div>
      </div>

      <div class="menu-wrapper">
        <div class="menu-inner" @click="handleGo('/code/mine/record')">
          <div class="menu-left">
            <img
              class="menu-left_icon"
              src="../../assets/img/mine_menu_2.png"
              alt=""
            />
            <div class="menu-left_name">我的记录</div>
          </div>
          <img class="menu-right" src="../../assets/img/right.png" alt="" />
        </div>
      </div>

      <div class="menu-wrapper">
        <div class="menu-inner" @click="handleGo('/code/mine/notice')">
          <div class="menu-left">
            <img
              class="menu-left_icon"
              src="../../assets/img/mine_menu_3.png"
              alt=""
            />
            <div class="menu-left_name">我的消息</div>
          </div>
          <img class="menu-right" src="../../assets/img/right.png" alt="" />
        </div>
      </div>

      <div class="menu-wrapper">
        <div class="menu-inner" @click="handleGo('/code/mine/share')">
          <div class="menu-left">
            <img
              class="menu-left_icon"
              src="../../assets/img/mine_menu_4.png"
              alt=""
            />
            <div class="menu-left_name">我要分享</div>
          </div>
          <img class="menu-right" src="../../assets/img/right.png" alt="" />
        </div>
      </div>

      <div class="menu-wrapper">
        <div class="menu-inner" @click="handleGo('/building')">
          <div class="menu-left">
            <img
              class="menu-left_icon"
              src="../../assets/img/mine_menu_5.png"
              alt=""
            />
            <div class="menu-left_name">智能客服</div>
          </div>
          <img class="menu-right" src="../../assets/img/right.png" alt="" />
        </div>
      </div>

      <div class="menu-wrapper">
        <div class="menu-inner" @click="handleGo('/code/mine/setting')">
          <div class="menu-left">
            <img
              class="menu-left_icon"
              src="../../assets/img/mine_menu_6.png"
              alt=""
            />
            <div class="menu-left_name">设置</div>
          </div>
          <img class="menu-right" src="../../assets/img/right.png" alt="" />
        </div>
      </div>
    </div>
    <p class="bottom-tip">便捷生活 一码通</p>
  </div>
</template>

<script>
import nus from "@nsrd/nus";
import { getSSCApplyInfo } from "../../apis/test";
import { storage } from "../../plugins/storage";

export default {
  name: "CodeMine",
  data() {
    return {
      name: "",
      idcard: ""
    };
  },
  mounted() {
    document.title = "我的";
    this.initData();
  },
  filters: {
    handleIDCard(val) {
      return val ? nus.masker.maskIDCard(val, 4) : "";
    },
    handleName(val) {
      return val ? nus.masker.maskChineseName(val) : "";
    }
  },
  methods: {
    async initData() {
      let user = storage.get("user");
      let info = {};
      if (user && user.name) {
        info = user;
      } else {
        info = await getSSCApplyInfo();
      }
      this.name = info.name ? info.name : "";
      this.idcard = info.idcard ? info.idcard : "";
    },
    handleGo(path) {
      if (path.indexOf("share") !== -1) {
        location.href = "yi-code://share";
      } else {
        this.$router.push(path);
      }
    }
  }
};
</script>

<style scoped lang="less">
.container-mine {
  background: #ffffff;

  .main-mine {
    .menu-wrapper {
      .menu-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 25px;
        padding: 25px 25px 25px 0;
        border-bottom: 1px solid #e6e3e3;

        .menu-left {
          display: flex;
          align-items: center;

          .menu-left_icon {
            width: 20px;
            height: 20px;
            margin-right: 15px;
          }

          .menu-left_name {
            font-size: 16px;
            text-align: left;
            color: #666666;
          }
        }

        .menu-right {
          width: 16px;
        }
      }
    }
  }

  .bottom-tip {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: #dadada;
    font-weight: 600;
  }

  .header {
    width: 100%;
    height: 160px;
    /*height: 110px;*/
    background-image: url("../../assets/img/home_bg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;

    .user-info {
      letter-spacing: 1.5px;

      .user-name {
        font-size: 24px;
        line-height: 33px;
        font-weight: 500;
        text-align: left;
        color: #ffffff;
      }

      .user-idcard {
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        span {
          padding-left: 3px;
        }
      }
    }

    img {
      width: 62px;
      height: 62px;
      margin: 0 24px;
    }
  }
}
</style>
